<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
            <el-form-item label="园所名称：" prop="schoolName">
                        <el-input
                          v-model="queryParams.schoolName"
                          placeholder="请输入园所名称"
                          clearable
                          size="small"
                        />
             </el-form-item>
            <el-form-item label="园所性质" prop="type">
             <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
               <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
             </el-select>
             </el-form-item>
             <el-form-item label="地区类型" prop="nature">
               <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                 <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
             <el-form-item label="学期" prop="semId">
                <el-select  v-model="queryParams.semId" filterable clearable multiple collapse-tags placeholder="请选择学期" style="width: 300px;" >
                  <el-option
                    v-for="item in semsterList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    size="small">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
               <el-table v-loading="loading" :data="tjList" >
                  <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
                  <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
                  <el-table-column  align="center" label="年级"  prop="attendance0"></el-table-column>
                  <el-table-column  align="center" label="班级"  prop="attendance0"></el-table-column>
                  <el-table-column  align="center" label="身高平均数"  prop="attendance4"></el-table-column>
                  <el-table-column  align="center" label="体重平均数"  prop="attendance4"></el-table-column>
                  <el-table-column  align="center" label="异常平均数"  prop="attendance4"></el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleAbnormal(scope.row)"
                      >异常数据</el-button>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleView(scope.row)"
                      >查看</el-button>
                    </template>
                  </el-table-column>
               </el-table>
           <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
      </el-form>
       <!-- 幼儿体检情况 -->
     <el-dialog title="幼儿体检情况" :visible.sync="open" width="950px" append-to-body>
         <el-form :model="childParams" ref="childForm" :inline="true"  label-width="88px">
               <el-form-item label="幼儿名称：" prop="name">
                           <el-input
                             v-model="childParams.name"
                             placeholder="请输入幼儿名称"
                             clearable
                             size="small"
                           />
                         </el-form-item>
            <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="childQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="childReset">重置</el-button>
            </el-form-item>
       </el-form>
       <el-table v-loading="loading" :data="childList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex1" width="80"></el-table-column>
              <el-table-column  align="center" label="幼儿姓名"  prop="grade" ></el-table-column>
              <el-table-column  align="center" label="身高"  prop="className"></el-table-column>
              <el-table-column  align="center" label="体重"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="体格"  prop="attendance4"></el-table-column>
           </el-table>
           <pagination v-show="childtotal>0" :total="childtotal" :page.sync="childParams.pageNum" :limit.sync="childParams.pageSize"
               @pagination="getList" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="classOk">确 定</el-button>
          <el-button @click="classOk">取 消</el-button>
        </div>
      </el-dialog>
          <!-- 异常数据 -->
     <el-dialog title="异常情况" :visible.sync="abnormalShow" width="950px" append-to-body>
         <el-form :model="childParams" ref="childForm" :inline="true"  label-width="88px">
               <el-form-item label="幼儿名称：" prop="name">
                           <el-input
                             v-model="childParams.name"
                             placeholder="请输入幼儿名称"
                             clearable
                             size="small"
                           />
                         </el-form-item>
            <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="childQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="childReset">重置</el-button>
            </el-form-item>
       </el-form>
       <el-table v-loading="loading" :data="abnormalList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex1" width="80"></el-table-column>
              <el-table-column  align="center" label="幼儿姓名"  prop="grade" ></el-table-column>
              <el-table-column  align="center" label="身高"  prop="className"></el-table-column>
              <el-table-column  align="center" label="体重"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="体格"  prop="attendance4"></el-table-column>
           </el-table>
           <pagination v-show="childtotal>0" :total="childtotal" :page.sync="childParams.pageNum" :limit.sync="childParams.pageSize"
               @pagination="getList" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="classOk">确 定</el-button>
          <el-button @click="classOk">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import moment from "moment";
import { selectSemster} from "@/api/base/semster";
export default {
  name: "qyyeysmx",
  data() {
    return {
        loading:false,
        queryParams:{
            schoolName:'',
            type:'',
            nature:'',
            semId:'',
            pageNum: 1,
            pageSize: 10,
        },
        total:0,
        tjList:[{schoolName:'园所1'}],
        open:false,
        // 学期数据
        semsterList: [],
        schoolTypeOptions:[],
        schoolNatureOptions:[],
        childParams:{
          name:'',
          pageNum: 1,
          pageSize: 10,
        },
        childList:[],
        childtotal:0,
        abnormalList:[
        ],
        abnormalShow:false,
    };
  },
  created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       selectSemster({'status':1}).then(response => {
         this.semsterList = response.rows;
        //  this.semsterList.map((item,index)=>{
        //     if(index<6){
        //         this.queryParams.semId.push(item.id)
        //     }
        //  })
        //  console.log( this.semsterList);
       });

  },
  mounted(){
        this.getList()
   },
  methods: {
    getList(){

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        pageNum: 1,
        pageSize: 10,
        name:'',
        schoolCode:'',
        classId:'',
      },
      this.dateTtime=new Date();
      this.resetForm("queryForm");
      this.handleQuery();
    },
     //打开园所内各个班级弹框
     handleView(val){
           console.log(val);
           this.open=true;
       },
     classOk(){
      this.open=false;
      this.abnormalShow=false;
     },
     // 序号
     customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
      },
      // 序号
      customeIndex1(index){
         return index+1+(this.childParams.pageNum-1)*this.childParams.pageSize
      },
      childReset(){

      },
      childQuery(){

      },
      handleAbnormal(){
        console.log(1111);
        this.abnormalShow=true;
      }

  }
};
</script>

<style lang="scss" scoped>
.echart{
    width:100%;
    // height: 700px;
        .abnormalChart{
            margin-top: 50px;
            width: 100%;
            height: 500px;

    }
}
</style>
